<template>
  <div class="base-table">
    <el-table
      :data="data"
      v-loading="loading"
      :stripe="stripe"
      :border="border"
      :height="height"
      :max-height="maxHeight"
      :empty-text="emptyText"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassName"
      :cell-class-name="cellClassName"
      :header-cell-class-name="headerCellClassName"
      :row-key="rowKey"
      :default-expand-all="defaultExpandAll"
      :expand-row-keys="expandRowKeys"
      :default-sort="defaultSort"
      :tooltip-effect="tooltipEffect"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      :select-on-indeterminate="selectOnIndeterminate"
      :indent="indent"
      :lazy="lazy"
      :load="load"
      :tree-props="treeProps"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave"
      @cell-click="handleCellClick"
      @cell-dblclick="handleCellDblclick"
      @row-click="handleRowClick"
      @row-contextmenu="handleRowContextmenu"
      @row-dblclick="handleRowDblclick"
      @header-click="handleHeaderClick"
      @header-contextmenu="handleHeaderContextmenu"
      @sort-change="handleSortChange"
      @filter-change="handleFilterChange"
      @current-change="handleCurrentChange"
      @header-dragend="handleHeaderDragend"
      @expand-change="handleExpandChange"
    >
      <!-- 动态插槽 -->
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"></slot>
      </template>
    </el-table>

    <!-- 分页器 -->
    <div v-if="pagination && total > 0" class="base-table__pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="paginationLayout"
        :background="paginationBackground"
        :small="paginationSmall"
        :disabled="paginationDisabled"
        :hide-on-single-page="hideOnSinglePage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { TableColumnCtx } from 'element-plus'

// 定义组件属性接口
interface BaseTableProps {
  // 数据相关
  data: any[]
  loading?: boolean
  emptyText?: string

  // 表格配置
  stripe?: boolean
  border?: boolean
  height?: string | number
  maxHeight?: string | number
  showHeader?: boolean
  highlightCurrentRow?: boolean

  // 样式配置
  rowClassName?: string | ((row: any, rowIndex: number) => string)
  cellClassName?: string | ((row: any, column: any, rowIndex: number, columnIndex: number) => string)
  headerCellClassName?: string | ((row: any, column: any, rowIndex: number, columnIndex: number) => string)

  // 展开行配置
  rowKey?: string | ((row: any) => string)
  defaultExpandAll?: boolean
  expandRowKeys?: (string | number)[]
  treeProps?: { children: string; hasChildren?: string; checkStrictly?: boolean }

  // 排序配置
  defaultSort?: { prop: string; order: string }

  // 选择配置
  selectOnIndeterminate?: boolean

  // 树形配置
  lazy?: boolean
  load?: (row: any, treeNode: any, resolve: (date: any[]) => void) => void

  // 汇总行配置
  showSummary?: boolean
  sumText?: string
  summaryMethod?: (param: { columns: TableColumnCtx<any>[], data: any[] }) => string[]

  // 合并行或列
  spanMethod?: (param: { row: any, column: any, rowIndex: number, columnIndex: number }) => number | { rowspan: number; colspan: number } | void

  // 工具提示配置
  tooltipEffect?: 'dark' | 'light'

  // 缩进配置（树形表格）
  indent?: number

  // 分页配置
  pagination?: boolean
  total?: number
  pageSizes?: number[]
  paginationLayout?: string
  paginationBackground?: boolean
  paginationSmall?: boolean
  paginationDisabled?: boolean
  hideOnSinglePage?: boolean
}

// 定义组件事件
interface BaseTableEmits {
  (e: 'select', selection: any[], row: any): void
  (e: 'select-all', selection: any[]): void
  (e: 'selection-change', selection: any[]): void
  (e: 'cell-mouse-enter', row: any, column: any, cell: HTMLTableCellElement, event: Event): void
  (e: 'cell-mouse-leave', row: any, column: any, cell: HTMLTableCellElement, event: Event): void
  (e: 'cell-click', row: any, column: any, cell: HTMLTableCellElement, event: Event): void
  (e: 'cell-dblclick', row: any, column: any, cell: HTMLTableCellElement, event: Event): void
  (e: 'row-click', row: any, column: any, event: Event): void
  (e: 'row-contextmenu', row: any, column: any, event: Event): void
  (e: 'row-dblclick', row: any, column: any, event: Event): void
  (e: 'header-click', column: any, event: Event): void
  (e: 'header-contextmenu', column: any, event: Event): void
  (e: 'sort-change', sort: { column: any, prop: string, order: string }): void
  (e: 'filter-change', filters: any): void
  (e: 'current-change', currentRow: any, oldCurrentRow: any): void
  (e: 'header-dragend', newWidth: number, oldWidth: number, column: any, event: Event): void
  (e: 'expand-change', row: any, expandedRows: any[]): void
  (e: 'update:currentPage', page: number): void
  (e: 'update:pageSize', size: number): void
}

// 默认属性
const props = withDefaults(defineProps<BaseTableProps>(), {
  loading: false,
  emptyText: '暂无数据',
  stripe: true,
  border: true,
  showHeader: true,
  highlightCurrentRow: false,
  defaultExpandAll: false,
  selectOnIndeterminate: true,
  showSummary: false,
  sumText: '合计',
  tooltipEffect: 'dark',
  pagination: false,
  total: 0,
  pageSizes: () => [10, 20, 50, 100],
  paginationLayout: 'total, sizes, prev, pager, next, jumper',
  paginationBackground: true,
  paginationSmall: false,
  paginationDisabled: false,
  hideOnSinglePage: false
})

// 定义事件
const emit = defineEmits<BaseTableEmits>()

// 分页相关响应式数据
const currentPage = ref(1)
const pageSize = ref(10)

// 事件处理函数
const handleSelect = (selection: any[], row: any) => {
  emit('select', selection, row)
}

const handleSelectAll = (selection: any[]) => {
  emit('select-all', selection)
}

const handleSelectionChange = (selection: any[]) => {
  emit('selection-change', selection)
}

const handleCellMouseEnter = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
  emit('cell-mouse-enter', row, column, cell, event)
}

const handleCellMouseLeave = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
  emit('cell-mouse-leave', row, column, cell, event)
}

const handleCellClick = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
  emit('cell-click', row, column, cell, event)
}

const handleCellDblclick = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
  emit('cell-dblclick', row, column, cell, event)
}

const handleRowClick = (row: any, column: any, event: Event) => {
  emit('row-click', row, column, event)
}

const handleRowContextmenu = (row: any, column: any, event: Event) => {
  emit('row-contextmenu', row, column, event)
}

const handleRowDblclick = (row: any, column: any, event: Event) => {
  emit('row-dblclick', row, column, event)
}

const handleHeaderClick = (column: any, event: Event) => {
  emit('header-click', column, event)
}

const handleHeaderContextmenu = (column: any, event: Event) => {
  emit('header-contextmenu', column, event)
}

const handleSortChange = (sort: { column: any; prop: string; order: string }) => {
  emit('sort-change', sort)
}

const handleFilterChange = (filters: any) => {
  emit('filter-change', filters)
}

const handleCurrentChange = (currentRow: any, oldCurrentRow: any) => {
  emit('current-change', currentRow, oldCurrentRow)
}

const handleHeaderDragend = (newWidth: number, oldWidth: number, column: any, event: Event) => {
  emit('header-dragend', newWidth, oldWidth, column, event)
}

const handleExpandChange = (row: any, expandedRows: any[]) => {
  emit('expand-change', row, expandedRows)
}

const handleSizeChange = (size: number) => {
  emit('update:pageSize', size)
  currentPage.value = 1 // 重置到第一页
  emit('update:currentPage', 1)
}

</script>

<style scoped>
.base-table {
  width: 100%;
}

.base-table__pagination {
  margin-top: var(--dbu-space-4);
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .base-table__pagination {
    justify-content: center;
  }
}
</style>